<template>
  <div class="register-container">
    <el-container>
      <el-header style="background-color: #67C23A; color: white;">
        <div style="text-align: center; font-size: 25px; font-weight: bolder">
          <i class="el-icon-s-promotion" style="margin-right: 25px"></i>
          广东龙舟文化推广平台
        </div>
      </el-header>
      <el-main style="background-color: #f0f9eb;">
        <el-card class="register-module">
          <div slot="header" class="clearfix">
            <span style="text-align: center; font-size: 20px; font-family: 'Microsoft YaHei'">
              <p><i class="el-icon-s-flag" style="margin-right: 18px; color: #67C23A;"></i>用户注册</p>
            </span>
          </div>
          <div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户类型" prop="type" class="user-type-item">
                <el-radio-group v-model="ruleForm.type" @change="handleTypeChange">
                  <el-radio label="team" border>龙舟队</el-radio>
                  <el-radio label="organizer" border>赛事主办方</el-radio>
                  <el-radio label="audience" border>观众</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <!-- 龙舟队和主办方注册表单 -->
              <template v-if="ruleForm.type === 'team' || ruleForm.type === 'organizer'">
                <el-form-item :label="ruleForm.type === 'team' ? '队伍名称' : '主办方名称'" prop="name">
                  <el-input v-model="ruleForm.name" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password" placeholder="请输入6-14位密码" show-password prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="ruleForm.confirmPassword" placeholder="请再次输入密码" show-password prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
              </template>
              
              <!-- 观众注册表单 -->
              <template v-if="ruleForm.type === 'audience'">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="ruleForm.username" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password" placeholder="请输入6-14位密码" show-password prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input v-model="ruleForm.confirmPassword" placeholder="请再次输入密码" show-password prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
              </template>
              
              <el-form-item>
                <el-button type="success" @click="submitForm('ruleForm')">注册</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="text" @click="$router.push('/login')">已有账号？去登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from '@/plugins/axios';

export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 6 || value.length > 14) {
        callback(new Error('密码长度在6到14个字符'));
      } else {
        if (this.ruleForm.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    
    return {
      ruleForm: {
        type: null,
        name: '',
        username: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleTypeChange(val) {
      this.$refs.ruleForm.clearValidate();
    },
    
    async submitForm(formName) {
      try {
        await this.$refs[formName].validate();
        
        let response;
        const requestData = {
          password: this.ruleForm.password
        };
        
        if (this.ruleForm.type === 'organizer') {
          requestData.organizerName = this.ruleForm.name;
          response = await axios.post("/organizer/register", requestData);
        } else if (this.ruleForm.type === 'team') {
          requestData.teamName = this.ruleForm.name;
          response = await axios.post("/team/register", requestData);
        } else if (this.ruleForm.type === 'audience') {
          requestData.audienceName = this.ruleForm.username;
          response = await axios.post("/audience/register", requestData);
        } else {
          this.$message.error('无效的用户类型');
          return;
        }
        
        
          this.$message.success('注册成功！');
          this.$router.push('/login');
        
      } catch (error) {
        console.error('注册失败:', error.response ? error.response.data : error.message);
        this.$message.error(error.response ? error.response.data.message : '注册失败，请稍后重试');
      }
    },
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.register-container {
  height: 100vh;
  background-color: #f0f9eb;
}

.register-module {
  margin: 60px auto;
  text-align: center;
  width: 500px;
  border: 1px solid #67C23A;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(103, 194, 58, 0.2);
}

.el-header {
  line-height: 60px;
}

.user-type-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
}

.el-radio.is-bordered {
  margin: 5px;
  border-color: #67C23A;
}

.el-radio.is-bordered.is-checked {
  border-color: #67C23A;
  background-color: #f0f9eb;
}

.el-button--success {
  background-color: #67C23A;
  border-color: #67C23A;
}

.el-button--success:hover {
  background-color: #5daf34;
  border-color: #5daf34;
}

.el-card__header {
  border-bottom: 1px solid #67C23A;
  background-color: #fff;
}

.el-card__body {
  background-color: #fff;
}

.el-form-item__label {
  color: #67C23A;
  font-weight: bold;
}

.el-input__inner:focus {
  border-color: #67C23A;
}

.el-input__inner::placeholder {
  color: #C0C4CC;
  font-size: 14px;
}
</style>